<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>国外疫情</title>
  <link rel="stylesheet" href="css/bootstrap.css" />
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
  <script src="http://cdn.zaixianke.com/china.js"></script>
  <script src="js/bootstrap.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery-3.4.0.min.js"></script>
  <link type="text/css" rel="stylesheet" href=" css/new_file.css">
</head>
<body>
  <!--		总数据展示-->
  <div class="shuju1">
    <div class="title1"><p><h3>国外疫情</h3></p></div>
    <div class="neirong">
      <div id="diyihangs">
        <div class="xianyouquezhen">
          <div class="xianyouquezhen1">新增确诊</div>
          <div class="xianyouquezhen2"style="color: #ff6a57;" id="xianyouquezhen"></div>
          <script type="text/javascript">
            User={}
            $.ajax({
              contentType:"application/json;charset=utf-8",
              type:"put",
              url:"http://localhost:8080/table/getXinzeng",
              data: JSON.stringify(User),
              dataType:"json",
              success:function(res) {
                console.log(res);
                res = JSON.stringify(res);
                var a=res.slice(11,-3);
                document.getElementById("xianyouquezhen").innerText=a;

              }
            })

          </script>
        </div>
        <div class="wuzhengzhuang">
          <div class="xianyouquezhen1">累计治愈</div>
          <div class="xianyouquezhen2"style="color: #e86d48;" id="xinzengwuzhengzhuang"></div>
          <script type="text/javascript">
            User={}
            $.ajax({
              contentType:"application/json;charset=utf-8",
              type:"put",
              url:"http://localhost:8080/table/getZhiyu",
              data: JSON.stringify(User),
              dataType:"json",
              success:function(res) {
                console.log(res);
                res = JSON.stringify(res);
                var a=res.slice(11,-3);
                document.getElementById("xinzengwuzhengzhuang").innerText=a;
              }
            })

          </script>
        </div>
        <div class="xianyouyisi">
          <div class="xianyouquezhen1">累计死亡</div>
          <div class="xianyouquezhen2"style="color: #ec9217;" id="xinzengbentu"></div>
          <script type="text/javascript">
            User={}
            $.ajax({
              contentType:"application/json;charset=utf-8",
              type:"put",
              url:"http://localhost:8080/table/getSiwang",
              data: JSON.stringify(User),
              dataType:"json",
              success:function(res) {
                console.log(res);
                res = JSON.stringify(res);
                var a=res.slice(11,-3);
                document.getElementById("xinzengbentu").innerText=a;
              }
            })

          </script>
        </div>
      </div>
      <div class="dierhangs">
        <div class="xianyouquezhen">
          <div class="xianyouquezhen1">累计确诊</div>
          <div class="xianyouquezhen2"style="color: #e83132;" id="leijiquezhen"></div>
          <script type="text/javascript">
            User={}
            $.ajax({
              contentType:"application/json;charset=utf-8",
              type:"put",
              url:"http://localhost:8080/table/getLeiji",
              data: JSON.stringify(User),
              dataType:"json",
              success:function(res) {
                console.log(res);
                res = JSON.stringify(res);
                var a=res.slice(11,-3);
                document.getElementById("leijiquezhen").innerText=a;
              }
            })

          </script>
        </div>
        <div class="wuzhengzhuang">
          <div class="xianyouquezhen1">治愈率</div>
          <div class="xianyouquezhen2"style="color: #476da0;" id="xinzengjingwai"></div>
          <script type="text/javascript">
            User={}
            $.ajax({
              contentType:"application/json;charset=utf-8",
              type:"put",
              url:"http://localhost:8080/table/getJingwaishuru",
              data: JSON.stringify(User),
              dataType:"json",
              success:function(res) {
                console.log(res);
                res = JSON.stringify(res);
                var a=res.slice(11,-5);
                document.getElementById("xinzengjingwai").innerText=a;
              }
            })

          </script>
        </div>
        <div class="xianyouyisi">
          <div class="xianyouquezhen1">病死率</div>
          <div class="xianyouquezhen2"style="color: #10aeb5;" id="leijizhiyu"></div>
          <script type="text/javascript">
            User={}
            $.ajax({
              contentType:"application/json;charset=utf-8",
              type:"put",
              url:"http://localhost:8080/table/getLeijizhiyu",
              data: JSON.stringify(User),
              dataType:"json",
              success:function(res) {
                console.log(res);
                res = JSON.stringify(res);
                var a=res.slice(11,-5);
                document.getElementById("leijizhiyu").innerText=a;
              }
            })

          </script>
        </div>
      </div>
    </div>
  </div>
  <!--		各个省市数据-->
  <div class="shuju2">
    <div class="shuju2_shuju">
      <div class="title1"><p><h3>疫情速递</h3></p></div>
      <div class="biao">
        <div class="biaotou">
          <div class="biaotou1">地区</div>
          <div class="biaotou2">新增本土</div>
          <div class="biaotou3">现有病例</div>
        </div>
        <a>
          <div class="biao-shuju">
            <div class="biao-shuju1">青岛</div>
            <div class="biao-shuju2">123</div>
            <div class="biao-shuju2">123</div>
          </div>
        </a>
        <a>
          <div class="biao-shuju">
            <div class="biao-shuju1">青岛</div>
            <div class="biao-shuju2">123</div>
            <div class="biao-shuju2">123</div>
          </div>
        </a>
        <a>
          <div class="biao-shuju">
            <div class="biao-shuju1">青岛</div>
            <div class="biao-shuju2">123</div>
            <div class="biao-shuju2">123</div>
          </div>
        </a>
        <a>
          <div class="biao-shuju">
            <div class="biao-shuju1">青岛</div>
            <div class="biao-shuju2">123</div>
            <div class="biao-shuju2">123</div>
          </div>
        </a>
        <a>
          <div class="biao-shuju">
            <div class="biao-shuju1">青岛</div>
            <div class="biao-shuju2">123</div>
            <div class="biao-shuju2">123</div>
          </div>
        </a>
        <div class="bottom-button">
          <button>展开</button>
        </div>
      </div>
    </div>
  </div>
  <!--		echarts 数据可视化-->
  <div class="shuju4">
    <ul class="nav">
      <li class="selected">各情况类型占比</li>
      <li>现有感染 省级TOP5</li>
    </ul>
    <div class="content">
      <div id="container" style="height: 400px" class="list"></div>

      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
      <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);

        var app = {};
        User={},
                $.ajax({
                  contentType:"application/json;charset=utf-8",
                  type:"put",
                  async:false,
                  url:"http://localhost:8080/table/getEchartsall",
                  data: JSON.stringify(User),
                  dataType:"json",
                  success:function(res){
                    console.log(res);
                    if(res) {
                      myChart.setOption({
                        tooltip: {
                          trigger: 'item'
                        },
                        legend: {
                          orient: 'vertical',
                          left: 'left',
                        },
                        series: [
                          {

                            type: 'pie',
                            radius: '50%',
                            data: res,
                            emphasis: {
                              itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                              }
                            }
                          }
                        ]
                      });
                    }
                  },
                  error:function(errorMsg){
                    alert("用户状态分析数据加载失败");
                    myChart.hideLoading();
                  }
                })
      </script>
      <div id="containers" style="height: 400px" class="list"></div>

      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
      <script type="text/javascript">
        var dom = document.getElementById("containers");
        var myChart = echarts.init(dom);
        myChart.showLoading();
        var app = {};
        var names = []; //类别数组（实际用来盛放X轴坐标值）
        var nums = []; //销量数组（实际用来盛放Y坐标值）
        User={},
                $.ajax({
                  contentType:"application/json;charset=utf-8",
                  type:"put",

                  url:"http://localhost:8080/table/getEcharts",
                  data: JSON.stringify(User),
                  dataType:"json",
                  success:function(res){
                    console.log(res);
                    if(res) {
                      for (var i = 0; i < res.length; i++) {
                        names[i] = res[i].name
                      }
                      for (var i = 0; i < res.length; i++) {
                        nums[i] = res[i].value
                      }
                      myChart.hideLoading()
                      myChart.setOption({
                        xAxis: {
                          type: 'category',
                          data: names
                        },
                        yAxis: {
                          type: 'value'
                        },
                        series: [{
                          data: nums,
                          type: 'bar'
                        }]
                      });
                    }
                  },
                  error:function(errorMsg){
                    alert("用户状态分析数据加载失败");
                    myChart.hideLoading();
                  }
                })
      </script>
    </div>
    <script>
      $(function(){
        //获取点击事件的对象
        $(".nav li").click(function(){
          //获取要显示或隐藏的对象
          var divShow = $(".content").children('.list');
          //判断当前对象是否被选中，如果没选中的话进入if循环
          if (!$(this).hasClass('selected')) {
            //获取当前对象的索引
            var index = $(this).index();
            //当前对象添加选中样式并且其同胞移除选中样式；
            $(this).addClass('selected').siblings('li').removeClass('selected');
            //索引对应的div块显示
            $(divShow[index]).show();
            //索引对应的div块的同胞隐藏
            $(divShow[index]).siblings('.list').hide();
          }
        });
      });

    </script>
  </div>
</body>
</html>